<template>
  <div class="ele-body">
    <a-card :bordered="false" title="赠送单信息">
      <lossInfoTable :receiptsDetail="receipts_detail" />
      <div class="margin-y-30">
		<div class="flex align-center justify-between">
			<a-space>
			  <a-input-search
				placeholder="请输入会员姓名/手机号"
				enter-button="确定"
				size="middle"
				v-model:value="codeVal"
				@search="onSearch"
			  />
			  <template
				v-if="receipts_detail.status < 1 || receipts_detail.status == 3"
			  >
				<a-button type="primary" class="ele-btn-icon" @click="toSelect()">
				  <span>选择客户</span>
				</a-button>
				<a-button type="btn" class="ele-btn-icon" @click="showGive = true">
				  <span>统一扣减</span>
				</a-button>
			  </template>
			</a-space>
			<a-space v-if="receipts_detail.status < 1 || receipts_detail.status == 3">
			  <a-button type="primary" class="ele-btn-icon" @click="save()"
				><span>保存</span></a-button
			  >
			  <!-- <a-button type="btn" class="ele-btn-icon" @click="cancel()"
				><span>取消</span></a-button
			  > -->
			</a-space>
		</div>
				

        <a-form
          class="margin-y-15"
          :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
          :wrapper-col="{
            md: { span: 17 },
            sm: { span: 20 },
            xs: { span: 24 }
          }"
        >
          <a-row :gutter="24">
            <a-col :md="24" :sm="24" :xs="24">
              <vxe-table ref="xTable" show-overflow="true" :data="tableData">
                <vxe-column field="member_info" title="基本信息" width="350">
                  <template #default="{ row }">
                    <div>
                      <!-- <a-image width="100" :src="record.info." /> -->
                      <div class="flex align-center">
                        <div class="margin-right-5"
                          >{{ row.member_info.name }}
                          <span v-if="row.member_info.nickname"
                            >({{ row.member_info.nickname }})</span
                          ></div
                        >
                        <man-outlined v-if="row.member_info.sex == '男'" />
                        <woman-outlined v-if="row.member_info.sex == '女'" />
                      </div>
                      <div class="flex align-center margin-top-10">
                        <span class="info-level">线下会员</span>
                        <span class="info-level"
                          >{{ row.member_info.level}}级</span
                        >
                      </div>
                      <div class="flex align-center margin-top-10">
                        <span class="margin-right-10"
                          >卡号：{{ row.member_info.card_num || '' }}</span
                        >
                        <span>手机号：{{ row.member_info.mobile || '' }}</span>
                      </div>
                    </div>
                  </template>
                </vxe-column>
                <vxe-column title="当前积分" width="150">
                  <template #default="{ row }"
                    ><div class="fs-12">{{ row.points }}</div></template
                  >
                </vxe-column>
                <vxe-column title="当前礼金" width="150">
                  <template #default="{ row }"
                    ><div class="fs-12">{{ row.cash }}</div></template
                  >
                </vxe-column>
                <vxe-column title="扣减积分" width="200">
                  <template #default="{ row }">
                    <a-input
                      placeholder="请输入"
                      type="number"
                      :disabled="
                        receipts_detail.status != 0 &&
                        receipts_detail.status != 3
                      "
                      v-model:value="row.points_amount"
                    />
                  </template>
                </vxe-column>
                <vxe-column title="扣减礼金" width="200">
                  <template #default="{ row }">
                    <a-input
                      placeholder="请输入"
                      type="number"
                      :disabled="
                        receipts_detail.status != 0 &&
                        receipts_detail.status != 3
                      "
                      v-model:value="row.cash_amount"
                    />
                  </template>
                </vxe-column>
                <vxe-column
                  title="操作"
                  v-if="
                    receipts_detail.status < 1 || receipts_detail.status == 3
                  "
                >
                  <template #default="{ row }">
                    <a @click="delOrt(row)">删除</a>
                  </template>
                </vxe-column>
              </vxe-table>
            </a-col>
            <a-col :md="24" :sm="24" :xs="24">
              <div class="margin-top-15">
                <vxe-pager
                  size="mini"
                  :current-page="tablePage.currentPage"
                  :page-size="tablePage.pageSize"
                  :total="tablePage.total"
                  :layouts="[
                    'PrevJump',
                    'PrevPage',
                    'JumpNumber',
                    'NextPage',
                    'NextJump',
                    'FullJump',
                    'Total'
                  ]"
                  @page-change="handlePageChange"
                />
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <bottomBtn
      :btnarr="btnarr"
      :receiptsDetail="receipts_detail"
      @bottomAction="bottomAction"
    />

    <!-- 选择客户弹窗 -->
    <select-member
      v-if="showCheck"
      v-model:visible="showCheck"
      :typeCode="receipts_detail.type_code"
      @load="getDetail"
      @done="done"
    />
    <!-- 统一赠送弹窗 -->
    <give
      v-if="showGive"
      v-model:visible="showGive"
      @done="giveOpt"
      @clearPointsOpt="clearPointsOpt"
      @clearCashsOpt="clearCashsOpt"
    />
    <!-- 作废弹窗 -->
    <zuofei
      v-if="showZuofei"
      v-model:visible="showZuofei"
      :editData="editData"
      detail="detail"
      :over="over"
    />
    <!-- 审核弹窗 -->
    <check-data
      v-if="showCheck2"
      v-model:visible="showCheck2"
      :editData="editData"
      detail="detail"
      :over="over"
    />
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import { finishPageTab, reloadPageTab } from '@/utils/page-tab-util';
  import {
    DownOutlined,
    UpOutlined,
    PlusOutlined,
    LoadingOutlined,
    ManOutlined,
    WomanOutlined
  } from '@ant-design/icons-vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import lossInfoTable from './components/lossInfoTable.vue';
  import selectMember from '@/components/jewelry/select-member.vue';
  import bottomBtn from '@/components/jewelry/bottomBtn.vue';
  import checkData from '../get_list/components/check-data.vue';
  import zuofei from '../get_list/components/zuofei.vue';
  import give from './components/give.vue';
  import {
    get_detail,
    del_member,
    add_member
  } from '@/api/member/receipts_points_deduct';
  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  const showCheck = ref(false);
  const receipts_detail = ref({});
  const visible = ref(false);
  //货品list
  const tableData = ref([]);
  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10
  });

  const codeVal = ref(null);
  const showGive = ref(false);

  const btnarr = ref([]);
  const showZuofei = ref(false);
  const showCheck2 = ref(false);
  const editData = ref({});

  btnarr.value = JSON.parse(localStorage.getItem('zhubao:btnstore'));

  const onSearch = () => {
    getDetail();
  };
  const delOrt = (row) => {
    Modal.confirm({
      title: '提示',
      content: '确认删除？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        del_member({ code: query.code, member_id: row.member_id })
          .then((res) => {
            message.success(res.msg);
            getDetail();
          })
          .catch((e) => {
            message.error(e || e.message);
          });
      }
    });
  };
  const save = () => {
    let ids = [];
    tableData.value.forEach((item) => {
      ids.push({
        member_id: item.member_id,
        points_amount: item.points_amount,
        cash_amount: item.cash_amount
      });
    });
    add_member({ code: query.code, members: ids })
      .then((res) => {
        message.success(res.msg);
        getDetail(1);
      })
      .catch((e) => {
        message.error(e || e.message);
      });
  };

  const cancel = () => {
    push('/member/receipts_points_deduct/get_list');
  };
  const giveOpt = (val) => {
    showGive.value = false;
    tableData.value.forEach((item) => {
      item.points_amount = Number(val.points_amount);
      item.cash_amount = Number(val.cash_amount);
    });
  };
  const clearPointsOpt = () => {
    showGive.value = false;
    tableData.value.forEach((item) => {
      item.points_amount = item.points;
    });
    console.log('====', tableData.value);
  };
  const clearCashsOpt = () => {
    showGive.value = false;
    tableData.value.forEach((item) => {
      item.cash_amount = item.cash;
    });
  };

  onMounted(() => {
    getDetail(1);
  });

  const handlePageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage;
    tablePage.pageSize = pageSize;
    getDetail(currentPage, pageSize);
  };

  const getDetail = (page) => {
    get_detail({
      code: query.code,
      keywords: codeVal.value,
      page: page
    }).then((res) => {
      receipts_detail.value = res.receipts_detail;
      tablePage.total = res.receipts_item.total;
      tableData.value = res.receipts_item.data;
    });
  };
  const toSelect = () => {
    showCheck.value = true;
  };
  //选择客户确认
  const done = (form) => {
    let data = {
      url: '/member/receipts_points_deduct/add_member'
    };
    actionFn(data, form, reloadTable);
  };
  const reloadTable = () => {
    showCheck.value = false;
    getDetail(1);
  };

  const bottomAction = (data) => {
    console.log(data);
    if (data.type == 'cancel') {
      /* Modal.confirm({
        title: '提示',
        content: `确定${data.name}?`,
        maskClosable: true,
        onOk: () => {
          actionFn(
            data,
            {
              code: receipts_detail.value.code
            },
            reloadPageTab
          );
        }
      }); */
      editData.value.code = receipts_detail.value.code;
      editData.value.make_user_name = receipts_detail.value.make_user_name;
      editData.value.create_time = receipts_detail.value.create_time;
      editData.value.url = data.url;
      showZuofei.value = true;
    }
    if (data.type == 'delete') {
      Modal.confirm({
        title: '提示',
        content: `确定${data.name}?`,
        maskClosable: true,
        onOk: () => {
          actionFn(
            data,
            {
              code: receipts_detail.value.code
            },
            finishPageTab
          );
        }
      });
    }
    if (data.type == 'confirm') {
      Modal.confirm({
        title: '提示',
        content: `确定${data.name}?`,
        maskClosable: true,
        onOk: () => {
          actionFn(
            data,
            {
              code: receipts_detail.value.code
            },
            reloadPageTab
          );
        }
      });
    }
    if (data.type == 'cancel_verify') {
      Modal.confirm({
        title: '提示',
        content: `确定${data.name}?`,
        maskClosable: true,
        onOk: () => {
          actionFn(
            data,
            {
              code: receipts_detail.value.code
            },
            reloadPageTab
          );
        }
      });
    }
    if (data.type == 'verify') {
      editData.value.code = receipts_detail.value.code;
      editData.value.url = data.url;
      showCheck2.value = true;
    }
  };
  const over = (param) => {
    let data = editData.value;
    actionFn(data, param, reloadPageTab);
  };

  /* 更新visible */
  const updateVisible = (value) => {
    visible.value = value;
  };
</script>

<style lang="less" scoped>
  :deep(.ant-upload.ant-upload-select.ant-upload-select-text) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 440px !important;
    height: 180px !important;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    .ant-upload {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
</style>
